<template>
<div class="main" >
    <!--绑定n，由于option的value是字符串类型，所以+默认进行字符串拼接
        使用.number属性转化为数字,先用纯vue的方式进行书写对应的加法案例
    -->
    <h1>当前的和是{{ sum }}</h1>
    <h2>放大10倍:{{ sum*10 }}</h2>
    <select  v-model.number="n">
        <!--注意value='1'这时候传递的是字符串-->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    
        <button @click='increase'>+</button>
        <button @click='decrease'>-</button>
        <button @click='increaseOdd'>只有是奇数才能添加</button>
        <button @click='increaseDelay'>延迟添加</button>
</div>
</template>
<script>
    export default{
        data(){
            return{
                sum:0,
                n:1, 
            }
        },
        methods:{
            increase(){
              //修改sum
              this.sum+=this.n
            },
            decrease(){
                this.sum-=this.n
            },
            increaseOdd(){
                if(this.sum%2){
                    this.sum+=this.n
                }
            },
            increaseDelay(){
                //箭头函数没有this，所以会向外寻找this，刚好找到对应的vc组件
                setTimeout(()=>{
                    this.sum+=this.n
                },500)
            },
        }
    }
</script>
